<h1 mat-dialog-title>{{ 'contract_agreement_page.new_def' | translate }}</h1>

<mat-dialog-content class="w-[800px]">
  <div class="flex flex-col mt-[10px]">
    <!--  ID -->
    <mat-form-field
      *ngIf="form.group.controls.id; let ctrl"
      id="form-field-id"
      color="accent">
      <mat-label>ID</mat-label>
      <input matInput autocomplete="new-id" [formControl]="ctrl" />
      <mat-error *ngIf="ctrl.invalid && ctrl.errors?.pattern">{{
        validationMessages.invalidWhitespacesOrColonsMessage
      }}</mat-error>
      <mat-error *ngIf="ctrl.invalid && ctrl.errors?.idAlreadyExists">
        {{ validationMessages.idExistsErrorMessage }}
      </mat-error>
    </mat-form-field>

    <!-- Access Policy -->
    <policy-select
      [label]="'general.access_pol' | translate"
      [control]="form.group.controls.accessPolicy"
      [policies]="policies"></policy-select>

    <!-- Contract Policy -->
    <policy-select
      [label]="'general.contract_policy' | translate"
      [control]="form.group.controls.contractPolicy"
      [policies]="policies"></policy-select>

    <!-- Assets -->
    <asset-select
      *ngIf="form.group.controls.assets; let ctrl"
      [label]="'general.assets' | translate"
      [control]="form.group.controls.assets"
      [assets]="assets"></asset-select>
  </div>
</mat-dialog-content>

<mat-dialog-actions class="flex flex-row justify-end">
  <button mat-button [mat-dialog-close]="null" [disabled]="loading">
    {{ 'general.cancel' | translate }}
  </button>

  <button
    color="primary"
    mat-raised-button
    [disabled]="loading || !form.group.valid"
    (click)="onCreate()">
    {{ 'general.create' | translate }}
  </button>
</mat-dialog-actions>
